<template>
  <div class="app-footer">
    <div class="container flex items-center justify-between">
      <div class="app-footer-logo">
        <el-space :size="15">
          <NuxtLink v-for="link in state.links" :key="link.url" :href="link.url" class="url" :title="link.title" target="_blank">
            <el-space :size="5">
              <Icon name="mdi:link-variant" size="14" />
              <span>{{ link.name }}</span>
            </el-space>
          </NuxtLink>
        </el-space>
      </div>
      <div class="nav space-x-4">
        <ClientOnly>
          <el-space :size="8">
            <NuxtLink href="https://gitee.com/jsfront/vue-admin-cn" target="_blank" title="前台仓库">
              <el-tooltip effect="dark" content="前台仓库" placement="top">
                <Icon name="logos:nuxt-icon" size="25" />
              </el-tooltip>
            </NuxtLink>
            <NuxtLink href="https://gitee.com/jsfront/nest-admin-api" target="_blank" title="API仓库">
              <el-tooltip effect="dark" content="API仓库" placement="top">
                <Icon name="logos:nestjs" size="18" />
              </el-tooltip>
            </NuxtLink>
            <NuxtLink href="https://qm.qq.com/cgi-bin/qm/qr?k=q_UShyBPPr0nqaGqLg6qjGRuDBJc_a1C&jump_from=webapi&authKey=QOG+deTFgg+me9Yl7Gt+lxpnbiQqU9MPS/h0fTIHdXBabE96FKNsLcBOve4VY1CB" target="_blank" title="Vue群">
              <el-tooltip effect="dark" content="Vue群" placement="top">
                <Icon name="vscode-icons:file-type-vue" size="22" />
              </el-tooltip>
            </NuxtLink>
            <NuxtLink href="https://qm.qq.com/cgi-bin/qm/qr?k=-Jr4gqZRj872N5JeKbJaqIrvrlu3maSq&jump_from=webapi&authKey=ZHUuc+ivFOkGyIqx1Mib8wK1UQudDakNhpBwWuDYFUowIFV+HBbJZXDukdw0i1wO" target="_blank" title="Node群">
              <el-tooltip effect="dark" content="Node群" placement="top">
                <img src="/icons/qq.svg" />
              </el-tooltip>
            </NuxtLink>
            <div class="action-btn share-more ui-animation">
              <el-popover popper-class="app-share-bar-popover" placement="top" width="175" trigger="hover">
                <template #reference>
                  <a href="###"><img src="/icons/weixin.svg" /></a>
                </template>
                <div class="ui-vue-wx animate__animated animate__bounceIn">
                  <div class="wechat-qrcode-title text-center mb-2">微信群</div>
                  <div class="wechat-qrcode-img">
                    <img width="150" src="/images/vue-wx.jpg" />
                  </div>
                </div>
              </el-popover>
            </div>
          </el-space>
        </ClientOnly>
      </div>
      <div class="copyright text-xs">
        <span class="mr-3"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noreferrer noopener">沪ICP备2022009358号-3</a></span>
        <span> &copy; {{ state.year }}. All rights reserved.</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const state = reactive<any>({
  // 列表
  links: [
    { name: 'react-admin.cn', title: 'react管理平台', url: 'http://react-admin.cn' },
    { name: 'ng-admin.cn', title: 'angular管理平台', url: 'http://ng-admin.cn' },
  ],
  year: new Date().getFullYear(),
})
</script>
